<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>IQC来料周报</title>
    <link rel="stylesheet" href="/3nod_web/layui/css/layui.css" media="all">
</head>
<body>
<link rel="stylesheet" type="text/css" href="/3nod_web/css/formSelects-v4.css" />

<div id="content">
<input type="hidden" th:value="${modelKey}" id = "modelKeyArryas">
<input type="hidden" th:value="${selectShipper}" id = "selectShipper">
        <h1>IQC来料周报</h1>
        <a href="/3nod_web/exportSuppliedMaterialsCheckWeekReport">
            <button class="layui-btn  layui-btn-sm">导出</button>
        </a>
        <form class="layui-form" action="" >
            <div class="layui-form-item" style="margin-top: 20px">

                <div class="layui-inline">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline" style="width:100px;">
                        <input type="text" name="startTime" id="startTime" autocomplete="off" class="layui-input"
                               th:value="${startTime}"
                        >
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline" style="width:100px;">
                        <input type="text" name="endTime" id="endTime" autocomplete="off" class="layui-input"
                               th:value="${endTime}">
                    </div>
                </div>
                <div class="layui-inline ">
                    <label class="layui-form-label">货主</label>
                    <div class="layui-input-inline " style="width: 168px;">
                        <select name="shipper"lay-filter="shipper" id="shipper">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class=" layui-inline">
                    <label class="layui-form-label">机型</label>
                    <div class="layui-input-inline " style="width: 300px;">
                        <select id="modelKey" lay-search name="modelKey"  xm-select="select1">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <input id="huanweiType"  lay-filter="huanweiType" type="checkbox" name="" title="华为机型" lay-skin="primary">
                </div>


            </div>

        </form>
           <div  style="margin-left: 100px;display: inline-block">
               <div class="layui-inline">
                   <button class="layui-btn layui-btn-sm" onclick="toInspectionWeekChart()">
                       生成周退率推移图
                   </button>
               </div>
               <div class="layui-inline" >
                   <button id="search" class="layui-btn layui-btn-sm" data-type="reload">搜索</button>
               </div>
           </div>
    <!--滚动条-->
    <div style="height:355px;width:100%;display:block;overflow-y:auto;">
        <!--数据展示-->
        <table class="layui-table" >
            <colgroup>
                <col width="150">
                <col width="150">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>项目</th>
                <th th:each="week:${session.weekList}"><span th:text="${week}"></span>周</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>送检批数</td>
                <td th:each="suppliedMaterialsCheckWeekReport:${session.suppliedMaterialsCheckWeekReportList}"
                    th:text="${suppliedMaterialsCheckWeekReport.checkQty}"></td>
            </tr>
            <tr>
                <td>合格批数</td>
                <td th:each="suppliedMaterialsCheckWeekReport:${session.suppliedMaterialsCheckWeekReportList}"
                    th:text="${suppliedMaterialsCheckWeekReport.okQty}"></td>
            </tr>
            <tr>
                <td>退货批数</td>
                <td th:each="suppliedMaterialsCheckWeekReport:${session.suppliedMaterialsCheckWeekReportList}"
                    th:text="${suppliedMaterialsCheckWeekReport.salesReturnQty}"></td>
            </tr>
            <tr>
                <td>批退拣货目标<0.5%</td>
                <td th:each="suppliedMaterialsCheckWeekReport:${session.suppliedMaterialsCheckWeekReportList}">0.50%
                </td>
            </tr>
            <tr>
                <td>批退次率</td>
                <td th:each="suppliedMaterialsCheckWeekReport:${session.suppliedMaterialsCheckWeekReportList}"
                    th:text="${suppliedMaterialsCheckWeekReport.lotRejectRate+'%'}"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<table class="layui-hide" id="demo" lay-filter="demo"></table>
<script src="/3nod_web/layui/layui.js" charset="utf-8"></script>
<script src="/3nod_web/js/jquery-1.8.3.js" charset="utf-8"></script>
<script src="/3nod_web/js/formSelects-v4.min.js" charset="utf-8"></script>
<script>


    layui.use('form', function () {
        var form = layui.form;
        getShipper();

        // 货主change事件
        form.on('select(shipper)', function (data) {
            $("#modelKeyArryas").val("");
            getModelKey();
        });
        //华为机型回显
        if($("#modelKeyArryas").val()=='JX00000142,JX00000143'){
            $("#huanweiType").prop("checked","checked");
        }
        form.render();
    });



    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;
    });


    function toInspectionWeekChart() {
        window.open("/3nod_web/report/iqc/chart/inspectionWeekChart", "_blank");
    }

    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#startTime'//指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#endTime'//指定元素
        });
    });
    $('#search').on('click', function () {
        searchConditions();
    });

    //按回车提交
    $(".layui-input-inline").keydown(function (e) {//当按下按键时
        if (e.which == 13) {//.which属性判断按下的是哪个键，回车键的键位序号为13
            searchConditions();
        }
    });

    function searchConditions() {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();

        //获取下拉框的值
        var formSelects = layui.formSelects;
        var modelKey = $("#modelKey").val();
        if( $("#huanweiType").prop("checked")){
            modelKey='JX00000142,JX00000143';
        }else{
            modelKey=formSelects.value('select1', 'valStr');
        }
        var shipper = $("#shipper").val();
        location.href = '/3nod_web/report/suppliedMaterialsCheckWeekReportList?startTime='
            + startTime + "&endTime=" + endTime + "&modelKey=" + modelKey+"&shipper="+shipper;
    }
    //货主下拉框
    function getShipper(){
        $.get("/3nod_web/report/getShipper",function (res) {
            for(var i =0;i<res.data.length;i++){
                $("#shipper").append("<option value=\""+res.data[i]+"\">"+res.data[i]+"</option>");
            }
            $("#shipper").val($("#selectShipper").val());
            //重新渲染
            layui.form.render("select");
        });
    }

    //机型下拉框
    function getModelKey(){
        var shipper = $("#shipper").val();
        $("#modelKey").empty();
        $.get("/3nod_web/report/getModelKey?shipper="+shipper,function (res) {
            for(var i =0;i<res.data.length;i++){
                $("#modelKey").append("<option value=\""+res.data[i].modelKey+"\">"+res.data[i].modelName+"</option>");
            }
            //重新渲染
            layui.formSelects.render("select");
            var modelKeyStr= $("#modelKeyArryas").val();
            var modelKeyArryas=modelKeyStr.split(',');
            layui.formSelects.value('select1', modelKeyArryas);

        });
    }
</script>

</body>
</html>